<template>
  <div class="select-body">
    <div class="select-top">
      <el-button plain @click="uploadVisible = true">{{ `上传${typeText}` }}</el-button>
      <el-link type="primary" :underline="false" @click="toMaterial"
        >去管理素材<i class="el-icon-arrow-right"></i
      ></el-link>
      <el-input
        v-model="title"
        size="mini"
        :placeholder="`请输入${typeText}名称`"
        @change="handleSearchSubmit"
      ></el-input>
    </div>
    <div class="material">
      <div class="material-left">
        <div class="sub-title">{{ `${typeText}分组` }}</div>
        <el-scrollbar>
          <div
            class="item"
            v-for="item in categoryList"
            :key="item.id"
            :class="{ active: item.id === category }"
            :style="`padding-left: ${item.id === 0 ? 15 : 30}px`"
            @click="changeCategory(item.id)"
          >
            <i class="el-icon-folder-opened"></i>
            <span>{{ `${item.title}(${item.material_count})` }}</span>
          </div>
        </el-scrollbar>
      </div>
      <div class="material-right" v-loading="loading">
        <el-scrollbar>
          <el-row :gutter="20" class="material-list">
            <template v-if="type === 1">
              <el-col :span="8" v-for="(item, index) in materialList" :key="index">
                <div
                  class="item picture"
                  :class="{ active: checked === item.attach_id }"
                  @click="changChecked(item)"
                >
                  <div class="tag">
                    <span class="angle"></span>
                    <span class="el-icon-check"></span>
                  </div>
                  <div class="img">
                    <edu-image :src="item.attach_url" fit="cover"></edu-image>
                  </div>
                  <div class="title">{{ item.filename }}</div>
                </div>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="12" v-for="(item, index) in materialList" :key="index">
                <div
                  class="item other"
                  :class="{ active: checked === item.attach_id }"
                  @click="changChecked(item)"
                >
                  <div class="tag">
                    <span class="angle"></span>
                    <span class="el-icon-check"></span>
                  </div>
                  <div class="left">
                    <el-image :src="typeIconImg"></el-image>
                  </div>
                  <div class="right">
                    <div class="title">{{ item.filename }}</div>
                    <div class="text">{{ item.filesize }}</div>
                  </div>
                </div>
              </el-col>
            </template>
            <edu-no-data v-if="$util.isEmpty(materialList)" marginTop="100px"></edu-no-data>
          </el-row>
        </el-scrollbar>
      </div>
    </div>
    <el-row type="flex" justify="center">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="paginate.page"
        :page-size="paginate.count"
        :hide-on-single-page="paginate.hidePage"
        layout="total, prev, pager, next"
        :total="paginate.total"
      >
      </el-pagination>
    </el-row>
    <template v-if="type === 1">
      <upload-img
        v-if="uploadVisible"
        :visible.sync="uploadVisible"
        :type="type"
        :category="categoryList"
        @reload="handleReload"
      ></upload-img>
    </template>
    <template v-else>
      <upload-file
        v-if="uploadVisible"
        :visible.sync="uploadVisible"
        :type="type"
        :category="categoryList"
        @reload="handleReload"
      ></upload-file>
    </template>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import UploadFile from '../../components/uploadFile.vue'
import UploadImg from '../../components/uploadImg.vue'
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    type: {
      type: Number,
      default: 0
    }
  },
  components: {
    EduNoData,
    UploadFile,
    UploadImg
  },
  data() {
    return {
      materialList: [],
      categoryList: [],
      checked: this.value,
      category: 0,
      title: '',
      loading: true,
      uploadVisible: false,
      paginate: {
        page: 1,
        total: 0,
        count: 12,
        hidePage: true
      },
      recycle: 0
    }
  },
  computed: {
    typeText() {
      const text = {
        1: '图片',
        2: '音频',
        3: '视频',
        4: '文档'
      }
      return text[this.type]
    },
    typeIconImg() {
      const url = {
        2: require('@/assets/images/material/audio.png'),
        3: require('@/assets/images/material/video.png'),
        4: require('@/assets/images/material/wenjian.png')
      }
      return url[this.type]
    }
  },
  methods: {
    // 分页
    handleCurrentChange() {
      let params = {
        page: this.paginate.page
      }
      this.handleGetDataSucc(params)
    },
    // 获取列表数据
    getMaterialData() {
      let params = {
        page: 1
      }
      this.handleGetDataSucc(params)
    },
    handleGetDataSucc(params) {
      this.checked = 0
      this.loading = true
      params = {
        ...params,
        count: this.paginate.count,
        type: this.type,
        category: this.category,
        title: this.title,
        trashed: this.recycle
      }
      this.$api.getUserTeacherMaterialList(
        params,
        res => {
          const { data } = res
          this.materialList = data.data
          this.loading = false
          this.paginate.total = data.total
        },
        () => {
          this.loading = false
        },
        false
      )
    },
    // 分组列表数据
    getMaterialCategoryData() {
      let params = {
        type: this.type,
        in: 0
      }
      this.$store.dispatch('material/GET_CATEGORY_LIST', { params: params }).then(res => {
        this.categoryList = res.data
      })
    },
    // 切换分组
    changeCategory(id) {
      this.category = id
      this.getMaterialData()
    },
    // 选择素材
    changChecked(data) {
      this.checked = data.attach_id
      this.$emit('change', {
        id: data.attach_id,
        url: data.attach_url,
        filename: data.filename,
        filesize: data.filesize
      })
    },
    // 搜索
    handleSearchSubmit() {
      let params = {
        page: 1
      }
      this.handleGetDataSucc(params)
    },
    // 跳转到管理素材
    toMaterial() {
      let url = {
        1: '/my/classes/material',
        2: '/my/classes/material/audio',
        3: '/my/classes/material/video',
        4: '/my/classes/material/file'
      }
      this.$router.push({
        path: url[this.type]
      })
    },
    // 加载数据
    handleReload() {
      let _this = this
      _this.getMaterialData()
    }
  },
  created() {
    this.getMaterialData()
    this.getMaterialCategoryData()
  },
  destroyed() {
    this.$store.commit('material/SET_MATERIAL_RESET')
  }
}
</script>

<style lang="scss" scoped>
.select-body {
  line-height: 1;
  .select-top {
    display: flex;
    align-items: center;
    .el-link {
      margin-left: 12px;
    }
    .el-input {
      margin-left: auto;
    }
  }
  .material {
    margin-top: 20px;
    display: flex;
    .material-left {
      width: 244px;
      border: 1px solid #e4e7ed;
      ::v-deep .el-scrollbar__wrap {
        height: 337px;
      }
      .sub-title {
        padding: 0 14px;
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        color: $text-color-import;
        line-height: 50px;
      }
      .item {
        padding-left: 15px;
        padding-right: 15px;
        height: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
        i {
          font-size: 16px;
          @include edu-color-auxiliary;
        }
        span {
          margin-left: 5px;
          font-size: 13px;
          font-weight: 400;
          color: $text-color-secondary;
        }
        &.active {
          background-color: #f6f9ff;
        }
      }
    }
    .material-right {
      margin-left: 20px;
      flex: 1;
      border: 1px solid #e4e7ed;
      box-sizing: border-box;
      ::v-deep .el-scrollbar__wrap {
        height: 387px;
      }
      .material-list {
        padding: 0 20px 20px;
      }
      .item {
        cursor: pointer;
        margin-top: 16px;
        position: relative;
        border-width: 1px;
        border-style: solid;
        .tag {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 10;
          opacity: 0;
          .angle {
            position: absolute;
            right: -13px;
            top: -13px;
            width: 0;
            height: 0;
            border: 13px solid transparent;
            @include edu-color-primary(border-top-color);
            transform: rotate(-135deg);
          }
          .el-icon-check {
            position: absolute;
            right: 0;
            top: -1px;
            color: #fff;
            font-size: 12px;
          }
        }
      }
      .picture {
        border-color: #fff;
        background-color: #f7f7f7;
        .img {
          height: 0;
          padding-top: 92px;
          position: relative;
          .el-image {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
        .title {
          padding: 0 6px;
          font-size: 12px;
          font-weight: 400;
          line-height: 28px;
          color: $text-color-import;
          @include ellipsis();
        }
      }
      .other {
        display: flex;
        align-items: center;
        border-color: #e4e7ed;
        padding: 15px;
        .left {
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #dcdfe6;
          .el-image {
            width: 24px;
            height: 28px;
          }
        }
        .right {
          flex: 1;
          margin-left: 10px;
          .title {
            width: 172px;
            font-size: 12px;
            font-weight: 400;
            color: $text-color-import;
            @include ellipsis();
          }
          .text {
            margin-top: 20px;
            font-size: 12px;
            font-weight: 400;
            color: $text-color-auxiliary;
          }
        }
      }
      .item.active {
        @include edu-color-primary(border-color);
        .tag {
          opacity: 1;
        }
      }
    }
  }
}
</style>
